<template>
	<view class="user">
		<view class="top">
			<image src="../../static/images/history.png" mode=""></image>
			<view class="text">浏览历史</view>
		</view>

		<view class="butgroup" v-if="listArr.length">
			<view class="butgroup-left">
				<button type="button" v-show="showSelect" @click="clickSelectAll">全选</button>
				<button type="button" v-show="showSelect" @click="clickCleanSelect">清除</button>
			</view>
			<view class="butgroup-right">
				<button type="button" @click="clickHistoricalManagement">管理</button>
			</view>
		</view>

		<view class="content" v-show="showSelect">
			<checkbox-group @change="changeSelectHistory">
				<view class="row" v-for="item in listArr">
					<label :key="item.id" style="display: flex; align-items: center;">
						<checkbox ref="checkboxs" :value="item.id" :checked="item.isChecke" />
						<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
					</label>
				</view>
			</checkbox-group>
		</view>

		<view class="content" v-show="!showSelect">
			<view class="row" v-for="item in listArr">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>

		<view class="nohistory" v-if="!listArr.length">
			<image src="../../static/images/nohis.png" mode="widthFix"></image>
			<view class="text">暂无浏览记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSelect: false,
				listArr: [],
				filteredHistory: [],
			};
		},
		onShow() {
			this.getHistory()
		},
		methods: {
			// 获取历史数据缓存
			getHistory() {
				this.listArr = uni.getStorageSync("newsHistory") || []
				this.listArr.forEach((item, index) => {
					item.isChecke = false
				})
				this.filteredHistory = this.listArr
			},
			// 获取选中Item的长度
			getSelectItemLen() {
				let selectItemLen = this.listArr.filter(item => !item.isChecke).length;
				return selectItemLen
			},
			// 获取没选中的Item
			getFilteredHistory() {
				let filteredHistory = this.listArr.filter(item => !item.isChecke);
				this.filteredHistory = filteredHistory
			},
			// 全选后改变checkbox的状态和值
			clickSelectAllFlag(flag) {
				this.$refs.checkboxs.forEach((item, index) => {
					item.checkboxChecked = flag
				})
				this.listArr.forEach((item, index) => {
					item.isChecke = flag
				})
			},
			// 点击管理按钮
			clickHistoricalManagement() {
				this.showSelect = !this.showSelect
				this.clickSelectAllFlag(false)
				this.getFilteredHistory()
			},
			// 点击全选按钮
			clickSelectAll() {
				if (this.getSelectItemLen()) {
					this.clickSelectAllFlag(true)
				} else {
					this.clickSelectAllFlag(false)
				}
				this.getFilteredHistory()
			},
			// 点击清除按钮
			clickCleanSelect() {
				uni.setStorageSync("newsHistory", this.filteredHistory)
				this.getHistory()
				this.showSelect = false
			},
			// 改变复选框状态
			changeSelectHistory(e) {
				let checkeItem = e.detail.value
				this.listArr.forEach((item, index) => {
					if (checkeItem.includes(item.id)) {
						this.$set(item, 'isChecke', true)
					} else {
						this.$set(item, 'isChecke', false)
					}
				})
				this.getFilteredHistory()
			},
			// 跳转详情页
			goDetail({
				classid: cid,
				id
			}) {
				if (this.showSelect) return
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${cid}&id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		.butgroup {
			display: flex;
			justify-content: space-between;

			button {
				color: #fff;
				font-size: 36rpx;
			}

			.butgroup-left {
				width: 50%;
				display: flex;

				button {
					width: 100%;

					&:first-child {
						background-color: #336699;
						margin-right: 60rpx;
					}

					&:last-child {
						background-color: #FF6666;
					}
				}
			}

			.butgroup-right {
				width: 33%;

				button {
					background-color: #33CC99;
				}
			}


		}

		.top {
			padding: 50rpx 0;
			background: #F8F8F8;
			color: #666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			.text {
				font-size: 38rpx;
				padding-top: 20rpx;
			}
		}

		.content {
			padding: 15rpx 30rpx;

			.row {
				border-bottom: 1px dotted #efefef;
				padding: 20rpx 0;
			}
		}

		.nohistory {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 450rpx;
			}

			.text {
				font-size: 26rpx;
				color: #888;
			}
		}

		.clearistory {
			position: static;
			width: 100%;
			margin-bottom: 30rpx;
			bottom: var(--window-bottom);

			button {
				color: #ffffff;
				background-color: #51a5cc;
			}

		}
	}
</style>